<template>
  <div class="image-header">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'proj' }">项目管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'line', params: { id: linestore.line?.projId } }">
        {{ linestore.line?.proj?.name }}
      </el-breadcrumb-item>
      <el-breadcrumb-item>作业图</el-breadcrumb-item>
      <el-breadcrumb-item>{{ linestore.line?.name }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="header-right">
      <el-button-group>
        <el-button type="primary" @click="$router.push({ name: 'buLine', params: { id: $route.params.id } })">
          布线
        </el-button>
        <el-button type="primary" @click="read">
          <FolderOpen theme="outline" size="14" fill="#eee" />
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import useLineStore from '@/states/useLineStore'
import useReadStore from '@/states/useReadStore'
import { FolderOpen } from '@icon-park/vue-next'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const linestore = useLineStore()
const readStore = useReadStore()
const route = useRoute()
const lindId = ref(+route.params.id)

async function read() {
  await readStore.read(lindId.value)
  ElMessage.success('读取成功')
}

linestore.find(+route.params.id)
</script>

<style scoped lang="scss">
.image-header {
  @apply flex justify-between items-center px-2;
  .header-right {
    @apply flex gap-2 items-center;
  }
}
</style>
